<template>
	<view class="look-record" style="background-color: #fff;">
			<view class="item-search">
				<view class="item-right" @click="isShowSelect = true">
					<text>{{ leftText }}</text>
					<u-icon name="arrow-down" color="#2979ff" size="20"></u-icon>
				</view>
				<u-search ref="search" class="search-input" placeholder="请输入关键字" @clear="clearQuery" v-model="searchText" :showAction="false" clearabled @search="determine"></u-search>
			</view>
		<u-picker :show="isShowSelect" :columns="leftList" keyName="value" @cancel="isShowSelect = false"
			@confirm="fnSure"></u-picker>
		<scroll-view :scroll-y="true" style="height:calc(100vh - 460rpx);" @scrolltolower="scrolltolower">
			<view class="list-box" v-for="(item,index) in recordList" @click="fnRelieve(item)" :key="index">
				<view class="list-item">
					<text class="title">{{item.pmName}}</text>
					<text class="remark" :class="item.isAllRelease ? 'blueStu' : 'redStu'">
						{{item.isAllRelease ? '已解绑' : '未解绑'}}
					</text>
				</view>
				<view class="site-name">
					<text style="padding-right: 10rpx;">线路名称:{{ item.planConstructionSiteSectionList.length && item.planConstructionSiteSectionList[0].lineName  || ''}}</text>
				</view>
				<view class="site-name">
					<text style="padding-right: 10rpx;">区间站点:{{item.planConstructionSiteSectionList.map(it => it.lineSiteSectionName).join(',')}}</text>
				</view>
				<view class="site-name">提交时间:{{getDate2(item.recordCreateDate)}}</view>
				<view class="list-item">
					<text>提交人:{{item.createUserName}}</text>
					<view class="item-btn" v-if="!item.isAllRelease" @click.native.stop="fnRelieve(item)">监控解绑</view>
				</view>
			</view>	
		</scroll-view>
	</view>
</template>

<script>
	import mixins from '@/utils/mixins.js'
	import { pmBindEqGetList } from "@/api/comprehensive/comprehensive.js"
	export default {
		mixins:[mixins],
		data() {
			return {
				isShowSelect: false,
				searchText:undefined,
				leftText: '全部',
				isAllRelease:null,	//解绑状态
				listData: [], //列表数据
				leftList: [
					[{
							code: 0,
							value: '未解绑'
						},
						{
							code: 1,
							value: '已解绑'
						},
						{
							code: null,
							value: '全部'
						},
					]
				],
				recordList:[],
				paging: {
					pageNum: 1,
					pageSize: 8,
					total: 0,
				},
				isLoading: false,
			}
		},
		methods: {
			getData() {
				return new Promise(resolve => {
					const { pageNum, pageSize } = this.paging
					let params = {
						currPage:pageNum,
						pageSize,
						projectId: uni.getStorageSync("isOwner"),
						params:{
							isAllRelease:this.isAllRelease, //解绑状态（0：未解绑1：已解绑, null:全部）
							keyword:this.searchText,		//搜索条件
							projectId: uni.getStorageSync("isOwner"),
							type:'gcwb',
						}
					}
					pmBindEqGetList(params).then(res => {
						if(!res.success) return
						const { list, total } = res.result;
						this.paging.total = total;
						resolve(list)
					})
				})
			},
			async fnSure(val) {
				this.leftText = val.value[0].value
				this.isAllRelease = val.value[0].code
				this.paging.pageNum = 1
				this.recordList = await this.getData()
				this.isShowSelect = false
			},
			async determine(val) {
				console.log(val,'搜索')
				this.searchText = val
				this.paging.pageNum = 1
				this.recordList = await this.getData()
			},
			async clearQuery() {
				this.searchText = undefined
				this.paging.pageNum = 1
				this.recordList = await this.getData()
			},
			//解绑
			fnRelieve(item) {
				console.log(item,'item')
				uni.navigateTo({
					url:`/subpackage-enginner/pages/engineeringMaintenance/jianKong/unbind?detailInfo=${JSON.stringify(item)}`
				})
			},
			/** 容器滚动到底部 */
			async scrolltolower() {
				// 判断是否有下一页
				if(!this.isLoading && this.paging.pageNum * this.paging.pageSize < this.paging.total) {
					// 加载...
					this.isLoading = true;
					this.paging.pageNum++;
					this.recordList = this.recordList.concat(await this.getData());
					this.isLoading = false;
				}
			},
		}
		
	}
</script>

<style scoped lang="scss">
	.list-box {
		border-bottom: 1px solid #dadada;
		padding: 12rpx;
		.list-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title {
				width: 500rpx;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				font-weight: bold;
				color: #22204E;
				font-size: 32rpx;
				padding: 10rpx 0;
			}
			.remark {
				width: 120rpx;
				clip-path: polygon(15rpx 0, 100% 0, calc(100% - 15rpx) 52rpx, 0% 52rpx);
				color: #FFFFFF;
				background: #2F80ED;
				text-align: center;
			}
			.blueStu {
				background: #2F80ED;
			}
			.redStu {
				background: #FF5C3C;
			}
			.item-btn {
				width: 160rpx;
				text-align: center;
				border-radius: 6rpx;
				color: #fff;
				padding: 8rpx;
				background-color: #2F80ED;
			}
		}
		.site-name {
			margin: 12rpx 0;
			max-width: 700rpx;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
	}
</style>